<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue-2.6.12开发.js"></script>
</head>
<body>
    <div id="root">
        <h2 v-text="n"></h2>
        <h2 :style="{opacity}">生命周期:new Vue后 自动在一系列特殊时间点的调用的回调函数</h2>
        <h2>当前的n值是:{{n}}</h2>
        <button @click="add">
            点我n+1
        </button>
        <button @click="bye">点我销毁vm</button>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                opacity: 1,
                n: 1
            },
            methods: {
                add() {
                    console.log('add');//add只要被点击依然会调用,只是vm被销毁了无法监测到数据变化后,不会在做页面响应式了。
                    this.n++
                },
                bye() {
                    //此方法为销毁vm方法 vm.$destroy() (自杀,开发中常用他杀 所以并不常用)
                    // 指令、Vue自定义监听事件、方法,皆失效(vm被销毁,通过它得来的结果全部失效)
                    // 注意: 原生DOM事件会依然奏效,只是vm被销毁了无法监测到数据变化后,不会在做页面响应式了。
                    this.$destroy()
                }
            },
            watch: {
                n() {
                    console.log('n 被修改了');
                }
            },
            // 1.生命周期函数之: beforeCreate回调函数-时间点:数据监测和数据代理创建之前
            // 无法通过vm访问到data内的数据及methods内方法(数据还未代理)
            beforeCreate() {
                console.log(this.n);//undefined 
                //    debugger//断点:此函数流程走完,则后面流程代码不在执行
            },


            // 2.生命周期函数之: create回调函数-时间点:数据监测和数据代理创建完成后
            // 数据监测、代理完成也就可以通过vm进行访问数据了
            created() {
                console.log(this.n);
            },


            // 3.模版解析完毕后生成虚拟DOM存放至内存(此时页面并未显示解析好的内容 因还并未生成真实DOM)
            // 备注:可以通过el指定模版 也可以在外部通过VM.$mount('#')指定模版 再者可以通过在实例内部配置template属性直接用模版字符将带有根节点元素的dom结构放入其中 然后渲染至页面(此方法必须带有根节点元素包裹dom结构)


            // 4.生命周期函数之: beforeMount回调函数-时间点:生成真实DOM之前-又名:挂载之前 (未经Vue编译的DOM结构)
            // 此时间点所有对DOM的操作 最终都不奏效(你可以修改但是最终不会渲染至页面,只会生成内存中解析好的虚拟dom)
            beforeMount() {
                console.log('beforeMount 生成真实Dom之前也就是页面不会被解析');
                // debugger//此时n在真实dom中就处于未解析的状态{{n}}
            },


            // 5.虚拟DOM生成真实DOM前会在vm.$el里备份一份虚拟DOM。以便后续的新旧虚拟DOM,diff比较。


            // 6.生命周期函数之: mounted回调函数-时间点:生成DOM之后-又名:挂载完毕 (Vue编译完成)
            // 此时间点所有对DOM的操作均有效,(尽可能避免,因我们使用Vue的目的就是避免去操作原生DOM,再去操作有点本末倒置)至此初始化结束
            // 在此环节可进行开启定时器、发送网络请求、绑定自定义事件、订阅消息等初始化操作
            mounted() {
                setInterval(() => {
                    this.opacity -= 0.01
                    if (this.opacity <= 0) this.opacity = 1
                }, 16);
                // console.log(this.n = '数据可以被修改,但尽量避免');
                console.log(this.$el instanceof HTMLElement);//true 验证环节5 vm.$el中存储的确实是dom结构
                // debugger
            },
            // 以上六个环节 统称Vue的初始化


            // 7.生命周期函数之: beforeUpdate回调函数-时间点:数据更新完成之前
            // 注意:此环节 数据是新的但页面是旧的 即页面尚未和数据保持同步 
            beforeUpdate() {
                // console.log(this.n = 99 + '数据更新了,但页面尚未保持同步');
                // debugger
            },

            // 根据新数据会生成新的虚拟DOM 随后与旧的虚拟DOM进行差异比较 最终完成页面更新 即完成了模型到视图的更新 Model--->View

            // 8.生命周期函数之: updated回调函数-时间点:数据更新完成后
            // 注意:此环节 数据是新的页面也是新的 即页面和数据保持同步 
            updated() {
                // console.log(this.n = 99 + '数据更新 页面也保持同步');
                // debugger
               

            },

            // 9.生命周期函数之: beforeDestroy回调函数-时间点:vm销毁完成之前
            // 注意:vm中所有的 数据 方法 指令等等都处于可用状态(但不会同步页面)
            // 此时间点一般用于:关闭定时器 取消订阅消息 解绑自定义事件等 收尾操作
            // 能访问 能操作数据 但没必要了 交代点后事就行了
            beforeDestroy() {
                console.log('beforDestroy');
                console.log(this.n = 88);
            },

            // 10.生命周期函数之: destroy回调函数-时间点:vm销毁完成
            // 一般不操作这个时间点没有意义 react内没有该生命周期函数
            destroyed() {
                console.log('destroyed');
            },
        })
    </script>
</body>

</html>